<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="__CSS__/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/loading.css">
    <link rel="stylesheet" href="__CSS__/userweb/common.css">
    <link rel="stylesheet" href="__CSS__/userweb/personal.css">
    <link rel="stylesheet" href="__CSS__/userweb/editMyInfo.css">
    <style>
        [v-cloak] {display: none;}
    </style>
</head>
<body>
{include file="html/Common/indexHeader"}
<div class="index_container" style="background-color: #fff">
    <!--轮播-->
    <div class="banner">
        <ul id="on"></ul>
        <div class="banner_list"></div>
    </div>
    <div class="content">
        <div class="my_show_container">
            <div class="my_show_box" >
                <div class="categories_list ">
                    <ul>
                        <li>
                            <a href="/userweb/index/myInfo" class="active">
                                <div class="list_title">
                                    <div class="title_zh">个人信息</div>
                                    <div class="title_en">personal information</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow-change.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/myOrder">
                                <div class="list_title">
                                    <div class="title_zh">我的订单</div>
                                    <div class="title_en">my order</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/myCollection">
                                <div class="list_title">
                                    <div class="title_zh">我的收藏</div>
                                    <div class="title_en">my collection</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/evaluation">
                                <div class="list_title">
                                    <div class="title_zh">收到评价</div>
                                    <div class="title_en">received evaluation</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/notification">
                                <div class="list_title">
                                    <div class="title_zh">系统通知</div>
                                    <div class="title_en">system notification</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/set">
                                <div class="list_title">
                                    <div class="title_zh">设置</div>
                                    <div class="title_en">settings</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="my_show_content" id="editmyinfo">
                    <div class="my_show_bar">
                        <div class="my_title">
                            <p>基本资料</p>
                            <p>basic information</p>
                        </div>
                    </div>
                    <div class="my_show_area" id="per_information" style="border: 1px solid #DEDEDE">
                        <div class="personal_show_box">
                            <div class="personal_img">
                                <img :src="user_image" alt="">
                            </div>
                            <div class="personal_show_name" onclick="change_picture()">
                                <div>change the picture</div>
                                <div>更换头像</div>
                            </div>
                        </div>
                        <div class="tab-content my_order_content">
                            <div class="edit_area tab-pane active" id="infoBox">
                                <div class="edit_info" >
                                    <div>
                                        <div class="info_title">
                                            <div class="title_zh">用户名</div>
                                            <div class="title_en">username</div>
                                        </div>
                                        <input type="text" v-model="user_name">
                                    </div>
                                    <div>
                                        <div class="info_title">
                                            <div class="title_zh">手机号</div>
                                            <div class="title_en">mobile number</div>
                                        </div>
                                        <input type="text" v-model="account" disabled="disabled">
                                        <button class="ver_code_font" v-on:click="getCode($event)">
                                            <div class="title_zh">获取验证码</div>
                                            <div class="title_en">obtain verification code</div>
                                        </button>
                                    </div>
                                    <div>
                                        <div class="info_title">
                                            <div class="title_zh">验证码</div>
                                            <div class="title_en">notification code</div>
                                        </div>
                                        <input type="text" v-model="code" maxlength="10">
                                    </div>
                                </div>
                                <div class="edit_submit">
                                    <div class="edit_btn" style="margin-top: 10px;" v-on:click="submit()">
                                        <div class="title_zh">保存</div>
                                        <div class="title_en">save</div>
                                    </div>
                                </div>
                            </div>
                            <div class="edit_area tab-pane" id="headBox">
                                <div class="edit_head_bar">
                                    <div class="edit_head_btn">
                                        <div class="title_zh">上传图片</div>
                                        <div class="title_en">upload img</div>
                                    </div>
                                </div>
                                <div class="edit_submit" v-on:click="getCode()">
                                    <div class="edit_btn" >
                                        <div class="title_zh">保存</div>
                                        <div class="title_en">save</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="chang_pic" class="chang_pic">
                        <div class="personal_show_box">
                            <div class="personal_img">
                                <img :src="user_image" alt="">
                            </div>
                            <div class="personal_show_name">{{ user_name }}</div>
                            <div class="set_personal_btn" onclick="per_information()">
                                <div class="title_zh">基本资料</div>
                                <div class="title_en">basic information</div>
                            </div>
                        </div>
                        <div class="chang_pic_file" v-loading="loading">
                            <div class="image my_head_img"></div>
                            <div class="file_detail">
                                <input type="file" @change="uploadImg" id="image" accept="image/jpeg,image/png,image/jpg" />
                            </div>
                        </div>
                        <div class="edit_submit" style="margin-top: 33px">
                            <div class="edit_btn" v-on:click="upload()">
                                <div class="title_zh">保存</div>
                                <div class="title_en">save</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="slogan">
    <div class="slogan_title">
        <p>让我们的生活有更好的选择</p>
    </div>
    <div class="sub_slogan_title">
        <p>Let our lives have a better choice.</p>
    </div>
</div>
{include file="html/Common/indexFooter"}
</body>
<script src="__JS__/userweb/jquery.min.js"></script>
<script src="__JS__/vue.js"></script>
<script src="__JS__/vue-resource.js"></script>
<script src="__JS__/loading.js"></script>
<script src="/js/supplies/axios.js"></script>
<script src="__JS__/bootstrap.min.js"></script>
<script src="__JS__/userweb/laydate/laydate.js"></script>
<script src="__JS__/userweb/common.js"></script>
<script src="__JS__/layer.js"></script>
<script src="__JS__/userweb/my/editMyInfo.js"></script>
<script>
    $(function () {
        validToken(); //验证tonken.
        bannerInit();
        $("#my").addClass("active");
        $("#my").siblings().removeClass("active");
    });
    function change_picture(){
        var text = '<p>个人信息</p>' +
                   '<p>Personal information</p>';
        $("#per_information").hide();
        $("#chang_pic").show();
        $("#editmyinfo .my_title").html(text);
    }
    function per_information(){
        var text = '<p>基本资料</p>' +
            '<p>Basic information</p>';
        $("#chang_pic").hide();
        $("#per_information").show();
        $("#editmyinfo .my_title").html(text);
    }
</script>
</html>